<template>
  <div class="page-manage">
    <div class="tool">
      <el-button icon="el-icon-plus" title="添加" @click="handleControl(CONTROL_TYPE.ADD)"></el-button>
      <el-button icon="el-icon-document-copy" title="复制" @click="handleControl(CONTROL_TYPE.COPY)"></el-button>
      <el-button
        icon="el-icon-delete"
        :disabled="canvasStyleDataLen === 1"
        title="删除"
        @click="handleControl(CONTROL_TYPE.DELETE)"
      ></el-button>
      <el-button
        icon="el-icon-upload2"
        title="上移"
        :disabled="canvasStyleDataLen === 1 || curCanvasPageIndex === 0"
        @click="handleControl(CONTROL_TYPE.UP)"
      ></el-button>
      <el-button
        icon="el-icon-download"
        title="下移"
        :disabled="curCanvasPageIndex === canvasStyleDataLen - 1 || canvasStyleDataLen === 1"
        @click="handleControl(CONTROL_TYPE.DOWN)"
      ></el-button>
    </div>
    <div class="list">
      <div
        v-for="(item, index) in canvasStyleData"
        :key="item.id"
        class="item"
        :class="{ active: curCanvasPageIndex === index }"
        @click="handlerCurCanvasItem(index)"
      >
        {{ item.pageName || `页面${index}` }}
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { CONTROL_TYPE } from '@/utils/constant'
import { pageData } from '@/utils/attr'
import { get } from 'lodash'
import { generateID } from '@/utils/utils'

export default {
  name: 'PageManage',
  data() {
    this.CONTROL_TYPE = CONTROL_TYPE
    return {
      activeName: 'media',
    }
  },
  computed: {
    ...mapState(['canvasStyleData', 'curCanvasPageIndex']),
    canvasStyleDataLen() {
      return this.canvasStyleData.length
    },
    curCanvasPage() {
      return get(this.canvasStyleData, `[${this.curCanvasPageIndex}]`) || pageData
    },
    canvasWidth() {
      return get(this.curCanvasPage, 'width') || 1920
    },
    canvasHeight() {
      return get(this.curCanvasPage, 'height') || 1080
    },
    canvasId() {
      return get(this.curCanvasPage, 'id')
    },
  },
  methods: {
    handlerCurCanvasItem(index) {
      this.$store.commit('setCurCanvasPageIndex', index)
    },
    handleControl(type) {
      let data = {}

      switch (type) {
        case CONTROL_TYPE.ADD:
          data = JSON.parse(JSON.stringify(pageData))

          data.width = this.canvasWidth
          data.height = this.canvasHeight
          data.pageName = `页面${this.canvasStyleDataLen + 1}`
          data.id = generateID()

          this.$store.commit('addPage', data)
          break
        case CONTROL_TYPE.COPY:
          data = JSON.parse(JSON.stringify(this.curCanvasPage))
          data.pageName = `${data.pageName}_copy`
          data.id = generateID()
          this.$store.commit('addPage', data)
          break
        case CONTROL_TYPE.DELETE:
          this.$store.commit('deletePage', this.canvasId)
          break
        case CONTROL_TYPE.UP:
          this.$store.commit('upPage', { index: this.curCanvasPageIndex })
          break
        case CONTROL_TYPE.DOWN:
          this.$store.commit('downPage', { index: this.curCanvasPageIndex })
          break
      }
    },
  },
}
</script>
<style scoped lang="scss">
.page-manage {
  padding: 5px;
  .tool {
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    .el-button--mini {
      padding: 7px;
    }
  }
  .list {
    padding: 5px 0;
    .item {
      padding: 10px 5px;
      border-bottom: 1px solid #f1f1f1;
      cursor: pointer;
      &.active {
        background: #ecf5ff;
        color: #409eff;
      }
    }
  }
}
</style>
